<template>
    <div class="task">
        <section class="hot-task">
            <h3>热门标签</h3>
            <ul class="ul-task">
                <li class="li-task">
                    <img src="./pages/img/s3.webp">
                    <p>明星头像</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/s1.webp">
                    <p>风景</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/s2.webp">
                    <p>动物</p>
                </li>
            </ul>
        </section>
        <section class="date-task">
            <h3>今日广告</h3>
            <li><a href="https://www.jd.com/"><img src="./pages/img/f13.webp"></a></li>
        </section>
        <section class="kind-task">
            <h3>热门分类</h3>
            <ul class="ul-task">
                <li class="li-task">
                    <img src="./pages/img/w1.jpg">
                    <p>头像</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/w3.webp">
                    <p>表情</p>
                </li>
            </ul>
            <ul class="ul-task">
                <li class="li-task">
                    <img src="./pages/img/w2.webp">
                    <p>风景建筑</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/w4.webp">
                    <p>清晰可爱</p>
                </li>
            </ul>
            <ul class="ul-task">
                <li class="li-task">
                    <img src="./pages/img/w5.webp">
                    <p>创意设计</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/w6.webp">
                    <p>影视精选</p>
                </li>
            </ul>
            <ul class="ul-task">
                <li class="li-task">
                    <img src="./pages/img/w7.webp">
                    <p>花草植物</p>
                </li>
                <li class="li-task">
                    <img src="./pages/img/w8.webp">
                    <p>卡通动漫</p>
                </li>
            </ul>
        </section>
    </div>
</template>

<style lang="less" scoped>
@import '../common/less/varible.less';
// scoped 作用域
.task {
    list-style: none;
    padding-top: 100px;
    height: 1130px;
    font-family: @fontfamily;
    // background-color: rgba(248, 219, 222, .4);
}

.hot-task {
    margin-top: 10px;
    width: 100%;
    height: 160px;
}

h3 {
    font-size: 22px;
    font-weight: bold;
    margin-left: 15px;
    margin-bottom: 10px;
}

.ul-task {
    display: flex;
    height: 120px;
    list-style: none;
    padding-left: 10px;
    margin-top: 5px;
}
.ul-task .li-task{
    position: relative;
}
.ul-task .li-task p{
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 110px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    height: 95%;
    width: 93%;
    background-color: rgba(0, 0, 0,.3);
    border-radius: 10px;
}
.ul-task img {
    width: 93%;
    z-index: 50;
    border-radius: 8px;
}

.date-task {
    height: 220px;
    img{
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;
    }
}

.box-3 {
    height: 150px;
    width: 90%;
    margin-left: 20px;
    border-radius: 10px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px
}
section{
    margin-top: 12px;
}
</style>